import Vue from "vue";
import VueRouter from "vue-router";

// 在Vue中使用VueRouter插件
Vue.use(VueRouter);

// 定义路由表
const routes = [
  {
    path: "/",
    // 重定向默认未输入 或者 输入值为/ 时候重新赋值的url地址
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../views/Home.vue"),
    children: [
      {
        path: "/home",
        redirect: "/home/index",
      },
      {
        path: "/home/index",
        component: () => import("../views/Home/Index.vue"),
        // redirect: "/home/index/hot",
        children: [
          {
            path: "/home/index",
            redirect: "/home/index/hot",
          },
          {
            path: "/home/index/hot",
            component: () => import("../components/Movies/Hot.vue"),
          },
          {
            path: "/home/index/cinema",
            component: () => import("../components/Movies/Cinema.vue"),
          },
          {
            path: "/home/index/waitshow",
            component: () => import("../components/Movies/Waitshow.vue"),
          },
          {
            path: "/home/index/classic",
            component: () => import("../components/Movies/Classic.vue"),
          },
        ],
      },
      {
        path: "/home/video",
        component: () => import("../views/Home/Video.vue"),
        // 路由元属性
        meta: {
          title: "影院票房 - 猫眼票房",
        },
      },
      {
        path: "/home/smallVideo",
        component: () => import("../views/Home/SmallVideo.vue"),
        meta: {
          title: "猫眼小视频",
        },
        // 路由独享的守卫 (这些守卫与全局前置守卫方法参数是一样的)
        beforeEnter: (to, from, next) => {
          console.log(to);
          console.log(from);
          next();
        },
      },
      {
        path: "/home/show",
        component: () => import("../views/Home/Show.vue"),
        meta: {
          title: "猫眼演出",
          requiredLogin: true,
        },
      },
      {
        path: "/home/mine",
        component: () => import("../views/Home/Mine.vue"),
        meta: {
          title: "我的猫眼",
          requiredLogin: true,
        },
      },
    ],
  },
  {
    path: "/detail/:id",
    component: () => import("../views/Detail.vue"),
    props: true,
  },
  {
    path: "/city",
    component: () => import("../views/City.vue"),
  },
  {
    path: "/login",
    component: () => import("../views/Login.vue"),
  },
  {
    path: "*",
    component: () => import("../views/NotFound404.vue"),
  },
];

const router = new VueRouter({
  routes,
});

// 全局前置守卫 --- (路由表里面的所有路由对象都在导航跳转触发时调用该全局前置守卫钩子函数)
// to: Route:即将要进入的目标路由对象
// from: Route:当前导航正要离开的路由
// next: Function:一定要调用该方法来resolve这个钩子 (相当于放行的意思)
router.beforeEach((to, from, next) => {
  // document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";
  if (to.meta.requiredLogin) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }
});

// 全局后置钩子
router.afterEach((to) => {
  document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";
});

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

export default router;
